<template>
  <div id="header">
    <mu-appbar style="width: 100%;text-align:left;" :color="thcolor" z-depth="2">
      <mu-button icon slot="left">
            <mu-icon value="menu"></mu-icon>
      </mu-button>
      {{title}}
      <mu-button icon slot="right">
        <i class="iconfont iconsousuo" style="font-size:0.5rem"></i>
      </mu-button>
      <mu-button flat slot="right">
        {{name}}
      </mu-button>
    </mu-appbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Title',
      name: 'Login',
      thcolor: 'red300',
      routerPath: ''
    }
  },
  methods: {
    getRouterPath () {
      this.routerPath = this.$route.path
    },
    changeMessge () {
      if (this.$route.path === '/home') {
        this.title = '首页'
      }
      if (this.$route.path === '/quick') {
        this.title = '速览'
      }
      if (this.$route.path === '/fund') {
        this.title = '资金'
      }
      if (this.$route.path === '/mine') {
        this.title = '我的'
      }
    }
  },
  mounted: function () {
  },
  watch: {
    '$route': 'changeMessge'
  },
  created () {
    this.getRouterPath()
    this.changeMessge()
  }
}
</script>

<style scoped>
#header {
  height: 100%;
  width: 100%;
}

</style>
